<!DOCTYPE html>
<html>
<head>
	<title></title>
<!-- 
对元素进行增删改查
	1.创建元素createElement//科瑞特
	对象.createElement("标签名称");
	var div = document.createElement("div");
	2.创建文本节点createChildText
	对象.createChildTextNode("文本内容")
	3.appendChild追加一个节点(包括文本节点和元素节点)
	4.removeChild 删除节点

	1.创建元素节点createElement()
	  需要一个标签名作为传进去，以字符串的形式创建 例如创建li document.createElement("li")
	  创建 div document.createElement("div")
	2.创建文本节点createTextNode(文本·节点)
	  需要一个文本内容作为参数，会将文本结果作为返回值返回
	3.在后面添加appendChild添加节点
	  向一个父节点添加子节点
	  语法：父级.appendChild(要添加的子节点);
	4.inserBefore指定子节点前面或中间插入  子节点
	  第一个参数：要插入的新节点
	  第二个参数：指定的旧节点
	   语法：父级.inserBefore(新节点,旧节点)
	5.replaceChild()替换节点
		第一参数：替换的新节点
		第二参数：被替换的
		语法：父级.replaceChild（新节点,旧节点）
	 replace替换
	6.removeChild()删除节点
		语法：父级.removeChild(要删除的节点);
		当不知道父级的时候，
		要删除的节点.parentNode.removeChild(要删除的节点);
 -->
</head>
<style>
		*{
				margin: 0;
				padding: 0;
			}
			.big{
				width: 100%;
				height: auto;
			}
			.box{
				width: 60%;
				height: 500px;
				margin: 0 auto;
			}
			.div_left{
				width: 40%;
				height: 100%;
				float: left;
				background: gray;
			}
			.div_left_ul{
				width: 100%;
				height: 100px;
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-between;
				text-align: center;
				margin-top:20px ;
			}
			.div_left_ul li{
				width: 25%;
				height: 100px;
				list-style: none;
			}
			.div_right{
				width: 20%;
				height: 100%;
				background: red;
				float: left;
				list-style: none;
			}
			#but{
				width:100%;
				height: 30px;
				margin-top:20px ;
			}
			span{
				display: inline-block;
				width:50px ;
				height: 20px;
				border: 1px solid #333;
				background: greenyellow;
			}
		</style>
</style>
<body>
	<div class="big">
		<div class="box">
			<div class="div_left">
				<p style="margin-top: 20px;">你喜欢的城市</p>
				<ul id="city">
					<li><span id="bj">北京</span></li>
					<li><span id="sh">上海</span></li>
					<li><span id="se">首尔</span></li>
					<li><span id="hn">河南</span></li>
				</ul>
				<p style="margin-top: 20px;">你喜欢的游戏</p>
				<ul id="game">
					<li><span id="cf">cf</span></li>
					<li><span id="lol">lol</span></li>
					<li id="hj"><span >红警</span></li>
					<li><span id="qq">qq</span></li>
				</ul>
				<p style="margin-top: 20px;">你喜欢的手机</p>
				<ul id="phone">
					<li><span id="hw">华为</span></li>
					<li><span id="xm">小米</span></li>
					<li id="op"><span>oppo</span></li>
					<li id="vi"><span>vivo</span></li>
					<input type="radio" name="sex"
					" value="female" id="username" class="girl">女
					<input type="radio" name="sex" value="male" id="gender1" class="boy">男
					<input type="radio" name="other" value="其他性别" id="gender2">其他
				</ul>
				
				
			</div>
			<div class="div_right">
				<li><button id="but1">点击#bj北京节点</button></li>
				<li><button id="but2">查找所有li节点</button>
				</li>
				 <li><button id="but3">北京</button>
				</li>
				<li><button id="but4">北京</button>
				</li>
				<li><button id="but5">北京</button>
				</li>
				<li><button id="but6">北京</button>
				</li>
				<li><button id="but7">北京</button>
				</li>
			</div>
		</div>
	</div>
</body>
<script>
//把绑定单机事件封装到一个函数里
function my(but){
	var btn = document.getElementById("but");
	 btn.onclick = function(){
		alert("howwle")
	}
	btn.onclick = fun;
}
my(but1,fun);


//创建li
var li = document.createElement("li");
//创建文字
var gztext = document.createTextNode("广州");
//获取父级
var city = document.getElementById("city");

//获取按钮
var btn01 = document.getElementById("but1");
//添加事件
btn01.onclick = function(){
	//li添加文字
	li.appendChild(gztext);
	//city添加子元素
	city.appendChild(li);
}
//父级获取
var game = document.getElementById("game");
//红警获取
var hj = document.getElementById("hj");
var btn02 = document.getElementById("but2");
//创建元素
var li2 = document.createElement("li");
var nongY = document.createTextNode("王者");

btn02.onclick = function(){
	//父级.insertBefore//音色比否（新节点，纠结点）
	li2.appendChild(nongY);
	game.insertBefore(li2 , hj);
}
//replaceChild()
	var os = document.getElementById("op");
	var vivo = document.getElementById("vi");
	var li_may = document.createElement("li");
	var blackMay = document.createTextNode("黑玫瑰");
	var wp = document.getElementById("wp");
	var btn03 = document.getElementById("but3");
	btn03.onclick = function(){
		li_may.appendChild(blackMay);
		os.replaceChild(li_may,vivo);
	}



</script>
</html>